<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form">
          <h1>登录</h1>
          <h2>博客管理后台</h2>
          <el-form-item >
            <el-input :prefix-icon="User" v-model="loginFormData.username" />
          </el-form-item>
          <el-form-item >
            <el-input :prefix-icon="Lock" v-model="loginFormData.password" show-password/>
          </el-form-item>
          <el-form-item >
            <el-button :loading="loginLoading" type="primary" class="btn_login" @click="loginDo">登录</el-button>
            
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User,Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import useUserStore from '../../store/user';
import router from '../../router';
import { ElNotification } from 'element-plus';


let userStore = useUserStore()
let loginFormData = reactive({
    username:"admin",
    password:""
})
let loginLoading = ref(false)
let loginDo = () => {
    if(loginLoading.value) {
        return
    }
    loginLoading.value = true
    userStore.loginAction(loginFormData)
    .then((res) => {
        loginLoading.value = false
        router.push({path:"/"})
        ElNotification({
            title: '成功',
            message: '登录成功',
            type: 'success'
        })
        console.log(res)
    }).catch((err) => {
        loginLoading.value = false
        console.log(err)
        ElNotification({
            title: '失败',
            message: err,
            type: 'error'

         })
    })
}
</script>

<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background-color: gray;
  .login_form{
    width: 80%;
    position: relative;
    top: 30vh;
    background-color: pink;
    border-radius: 10px;
    height: 300px;
    padding: 10px 30px;
    h1{
      text-align: center;
      font-size: 40px;
    }
    h2{
        text-align: center;
        font-size: 20px;
        margin: 20px 0;
    }
    .btn_login{
        width: 100%;
    }
  }
}
</style>
